<script setup>
import { postDelPost } from '@/axios/api/posts'
import LfDropdownPanel from '@/components/commonUI/LfDropdownPanel.vue'
import { useLastPostListQuery, useUserPostsQuery } from '@/composables/usePostDataQuery'
import { useGlobalStore } from '@/stores/globalStore'
import { useRoute, useRouter } from 'vue-router'
import MoreIcon from '@/components/svgComponents/MoreIcon.vue'
import { useMyInfoQuery } from '@/composables/useUserInfoQuery'
import BackIcon from '@/components/svgComponents/BackIcon.vue'
import SplitScreen from '@/components/svgComponents/SplitScreen.vue'
import LfButton from '@/components/commonUI/LfButton.vue'
import FullScreen from '@/components/svgComponents/FullScreen.vue'
import { ElMessage } from 'element-plus'
import { post } from '@/axios/utils/request'
import ReportDialog from '@/components/commonUI/ReportDialog.vue'
import { ElMessageBox } from 'element-plus'

const globalStore = useGlobalStore()

const props = defineProps({
  title: String,
  postId: Number,
  uid: Number,
  isAdmin: Boolean,
  topicId: Number,
  postInnerTop:Boolean
})

const isPostTop = ref(props.postInnerTop)
const router = useRouter()
const route = useRoute()

const { refetch: refetchUserPosts } = useUserPostsQuery(route.params.uid)
const { refetch: refetchLastPostList } = useLastPostListQuery(globalStore.postFilter)

const { userInfo } = useMyInfoQuery()

const handleClose = () => {
  // 移除路由中的post/id
  // router.push(route.path.replace(/\/post.*/, ''))
  router.back()
}

const handleDeletePost = () => {
  ElMessageBox.confirm('确认删除该帖子吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    postDelPost({ id: props.postId }).then((res) => {
      refetchUserPosts()
      refetchLastPostList()

      handleClose()
    })
  }).catch(() => {
    // 取消删除
  }); 
}

const handleSplitScreen = () => {
  globalStore.setPostDetailMode('split screen')
  globalStore.setPostDetailShow(true)

  localStorage.setItem('postDetailMode', 'split screen')
}

const handleFullScreen = () => {
  globalStore.setPostDetailMode('full screen')
  globalStore.setPostDetailShow(false)

  localStorage.setItem('postDetailMode', 'full screen')
}

const handlePostToTopic = async () => {
  try {
    const res = await post('/post/setPostTop', { postId: props.postId, topicId: props.topicId })
    if (res && res.code === 0) {
     isPostTop.value = true
      ElMessage.success('置顶成功！')
    } else {
      ElMessage.error(res?.msg || '置顶失败')
    }
  } catch (e) {

    ElMessage.error(e)
  }
}

const handleDelToTopic = async () => {
  try {
    const res = await post('/post/topPostDel', { postId: props.postId, topicId: props.topicId })
    if (res && res.code === 0) {
      isPostTop.value = false
      ElMessage.success('取消置顶成功！')
    } else {
      ElMessage.error(res?.msg || '取消置顶失败')
    }
  } catch (e) {

    ElMessage.error(e)
  }
}

// 举报相关
const showReportDialog = ref(false)
const reportInfo = computed(() => ({
  type: 'post',
  id: props.postId,
  title: props.title,
  content: props.content,
}))

const handleReport = () => {
  showReportDialog.value = true
}
//处理举报成功
const handleReportSuccess = () => {
  ElMessage.success('举报已提交，我们会尽快处理')
}

</script>

<template>
  <div class="bg-[--surface-0] split-line-b h-[55px] flex-cb px-4 sticky top-0 z-10 flex-shrink-0">
    <!-- <div v-if="globalStore.postDetailMode === 'split screen'">{{ title }}</div> -->

    <!-- v-if="globalStore.postDetailMode === 'full screen'" -->

    <div class="flex items-center gap-1 cursor-pointer" @click="handleClose">
      <BackIcon />
      <div class="text-sm whitespace-nowrap font-semibold">返回</div>
    </div>

    <div class="flex items-center gap-2">
      <!-- <LfButton
        v-if="globalStore.isPostDetailShow"
        @click="handleFullScreen"
        tip="全屏显示帖子详情"
        tip-position="bottom"
        type="none">
        <FullScreen />
      </LfButton>
      <LfButton v-else @click="handleSplitScreen" tip="分屏显示帖子详情" tip-position="bottom" type="none">
        <SplitScreen />
      </LfButton> -->
      <div class="relative">
        <LfDropdownPanel>
          <button class="flex items-center">
            <MoreIcon />
          </button>
          <template #content>
            <div class="p-3 w-[180px] bg-[--fill-0] rounded-lg shadow-lg flex flex-col gap-2">
              <button @click="handleDeletePost" class="text-red-700" v-if="isAdmin || userInfo.result.uid == uid">
                删除帖子
              </button>
              <button @click="handlePostToTopic" v-if="isAdmin && isPostTop === false">置顶到主题</button>
              <button @click="handleDelToTopic" v-if="isAdmin && isPostTop === true">取消置顶到主题</button>
              <button @click="handleReport">举报</button>
            </div>
          </template>
        </LfDropdownPanel>
      </div>

      <img
        v-if="globalStore.isPostDetailShow"
        src="/imgs/commonIcons/close.svg"
        alt=""
        class="cursor-pointer"
        @click="handleClose" />
    </div>
    <!-- 使用举报组件 -->
    <ReportDialog v-model="showReportDialog" type="1" :report-info="reportInfo" @success="handleReportSuccess" />
  </div>
</template>

<style scoped lang="scss"></style>
